<template>
  <a-form-model
    :model="form"
    :label-col="{ span: 4 }"
    :wrapper-col="{ span: 18 }"
  >
    <a-row :gutter="24">
      <a-col :span="8">
        <a-form-model-item label="所属届次">
          <s-select
            v-model="form.strSector"
            :selectOption="strSectors"
            placeholder="--请选择界别--"
          ></s-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="提案类别">
          <s-select
            v-model="form.strFaction"
            :selectOption="strFactions"
            placeholder="--请选择党派--"
          ></s-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="提案者类型">
          <s-select
            v-model="form.strAge"
            :selectOption="strAges"
            placeholder="--请选择性别--"
          ></s-select>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :span="8">
        <a-form-model-item label="提案状态">
          <s-select
            v-model="form.strNation"
            :selectOption="strNations"
            placeholder="--请选择民族--"
          ></s-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="办理状态">
          <s-select
            v-model="form.strJG"
            :selectOption="strJGs"
            placeholder="--请选择籍贯--"
          ></s-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="办理程度">
          <s-select
            v-model="form.strFullEdu"
            :selectOption="strFullEdus"
            placeholder="--请选择学历--"
          ></s-select>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :span="8">
        <a-form-model-item label="主办单位">
          <a-input />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="分办单位">
          <a-input />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="会办单位">
          <a-input />
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :span="8">
        <a-form-item label="提案去向">
          <s-select
            v-model="form.strDutyTag"
            :selectOption="dutyTags"
            placeholder="--请选择职能标签--"
          ></s-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="所属届别">
          <s-select
            v-model="form.strAgeRange"
            :selectOption="strAgeRanges"
            placeholder="--请选择年龄段--"
          ></s-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="所属党派">
          <s-select
            v-model="form.strAgeRange"
            :selectOption="strAgeRanges"
            placeholder="--请选择年龄段--"
          ></s-select>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :span="8">
        <a-form-item label="会中提案">
          <a-radio-group :options="strAges" v-model="form.region" />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="联名提案">
          <a-radio-group :options="strAges" v-model="form.region" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="公开提案">
          <a-radio-group :options="strAges" v-model="form.region" />
        </a-form-model-item>
      </a-col>
    </a-row>
    <div class="form-footer">
      <a-button type="primary" @click="onSearch"> 查询 </a-button>
      <a-button class="btn-reset" style="margin-left: 14px" @click="resetForm">
        重置
      </a-button>
    </div>
  </a-form-model>
</template>
<script>
export default {
  data() {
    return {
      other: '',
      form: {
        strSector: undefined,
        strFaction: undefined,
        strAge: undefined,
        strNation: undefined,
        strJG: undefined,
        strFullEdu: undefined,
        strDutyTag: undefined,
        strAgeRange: undefined,
        strFunction: '',
        region: undefined
      },
      strSectors: [],
      strFactions: [],
      strAges: [
        { label: '是', value: '1' },
        { label: '否', value: '0' }
      ],
      strNations: [],
      strJGs: [],
      strFullEdus: [],
      dutyTags: [],
      strAgeRanges: []
    }
  },
  methods: {
    onSearch() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
.form-footer {
  width: 100%;
  text-align: center;
}
/**form-item的重置样式 */
/deep/.ant-form-item {
  margin-bottom: 5px;
  color: #333;
}
/**select的重置样式 */
/deep/.ant-select-selection--single {
  height: 34px;
  border-radius: 2px;
}
/deep/.ant-select-selection__placeholder {
  color: #333;
}
/**input重置样式 */
/deep/.ant-input {
  border-radius: 2px;
  height: 34px;
}
input::-webkit-input-placeholder {
  /* placeholder颜色  */
  color: #9c9c9c;
}
</style>